<template>
  <div class="Input">
    <van-search v-model="value" show-action placeholder="请输入小区或地址">
      <!-- 城市列表 -->
      <template #label>
        <span @click="toCity">{{ $store.state.area.city }}</span>
      </template>

      <!-- 地图 -->
      <template #action>
        <van-icon name="location-o" @click="toMap" />
      </template>
    </van-search>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
    };
  },
  methods: {
    toCity() {
      this.$router.push({
        path: "/city",
      });
    },
    toMap() {
      this.$router.push("/map");
    },
  },
};
</script>

<style scoped lang="less">
.Input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  .van-search {
    background-color: transparent;
  }
  :deep(.van-search__action) {
    font-size: 30px;
    color: #fff;
  }

  .van-field__left-icon .van-icon {
    color: #a6a8aa;
  }
}
</style>
